<template>
    <div>
        <global-tables
            :total="total"
            :list="list"
            :loading="loading"
            :columns="columns"
            :current="search.Page"
            @changePage="handleChangePage"
            @handleAllSelect="handleAllSelect"
        >
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap">
                    <div></div>
                    <div class="table-top-wrap-bottom">
                        <div>
                            <Select v-model="search.State" style="width:70px;margin:0 10px;" placeholder="状态">
                                <Option value="0">驳回</Option>
                                <Option value="1">审批中</Option>
                                <Option value="2">审结</Option>
                                <Option value="3">作废</Option>
                            </Select>
                        </div>
                        <div>
                            <input type="text" class="style-input" @keyup.enter="handleSearch" v-model="search.keyword" placeholder="请输入标题" />
                            <i-input style="display:none"></i-input>
                        </div>
                        <div>
                            <Button icon="ios-search" @click="handleSearch" class="search-btn">搜索</Button>
                        </div>
                    </div>
                </div>
            </Form>
        </global-tables>
        <view-approval v-if="isViewApproval" :id="itemId" :isApproval="isViewApproval" @handleCloseViewApproval="handleCloseViewApproval"></view-approval>
        <Approval
            @setApproval="setApproval"
            :directory="{directory:'OrgPath'}"
            :isApproval="isApproval"
            :groupid="groupId"
            :check="1"
            v-if="isApproval"
            :label="ApprovalLabel"
            :id="itemId"
            :ApprovalTitle="'修改审批'"
            :info="approvalInfo"
        ></Approval>
    </div>
</template>

<script>
/**
 * 我的申请
 */
import { cyclicRouting, getdate } from '@/util';
import { getModulePermission } from '@/api/user';
import { getTablesList, getItemInfo, deleteApproval } from './service';
import GlobalTables from '@/components/GlobalTables';
import ViewApproval from '@/components/ViewApproval';
import Approval from '@/components/Approval';

export default {
    name: 'FlowApply',
    components: {
        GlobalTables,
        ViewApproval,
        Approval
    },
    data() {
        return {
            list: [],
            cityList: [],
            isApproval: false,
            groupId: 0,
            itemId: 0,
            isView: false,
            allSelectArr: null,
            loading: true,
            isViewApproval: false,
            ApprovalLabel: '',
            approvalInfo: [],
            formItem: {},
            ruleValidate: {},
            total: 0,
            search: {
                keyword: '',
                pageindex: 1,
                pagesize: 10
            },
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '申请标题',
                    key: 'Title'
                },
                {
                    title: '审批项目',
                    width: 130,
                    key: 'GroupName'
                },
                {
                    title: '当前审批人',
                    key: 'CurrentName'
                },
                {
                    title: '状态',
                    width: 130,
                    render: (h, params) => {
                        const { State } = params.row;
                        if (State == 0) {
                            return h('div', [
                                h('Badge', {
                                    props: {
                                        status: 'warning',
                                        text: '驳回'
                                    }
                                })
                            ]);
                        } else if (State == 1) {
                            return h('div', [
                                h('Badge', {
                                    props: {
                                        status: 'processing',
                                        text: '审批中'
                                    }
                                })
                            ]);
                        } else if (State == 2) {
                            return h('div', [
                                h('Badge', {
                                    props: {
                                        status: 'success',
                                        text: '审结'
                                    }
                                })
                            ]);
                        } else if (State == 3) {
                            return h('div', [
                                h('Badge', {
                                    props: {
                                        status: 'error',
                                        text: '作废'
                                    }
                                })
                            ]);
                        }
                    }
                },
                {
                    title: '创建时间',
                    width: '130',
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'span',
                                {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    }
                                },
                                getdate(new Date(params.row.CreateTime).getTime())
                            )
                        ]);
                    }
                },
                {
                    title: '操作',
                    width: '150',
                    align: 'left',
                    render: (h, params) => {
                        const { isView } = this;
                        const { State } = params.row;
                        return h('div', [
                            isView &&
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            background: '#5ab1ef',
                                            border: 'none',
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.handleBtnClick(params.row, 'view');
                                            }
                                        }
                                    },
                                    '查看'
                                ),
                            State == 1 &&
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            border: 'none',
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.handleBtnClick(params.row, 'delete');
                                            }
                                        }
                                    },
                                    '撤销申请'
                                ),
                            State == 0 &&
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'info',
                                            size: 'small'
                                        },
                                        style: {
                                            border: 'none',
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.handleBtnClick(params.row, 'edit');
                                            }
                                        }
                                    },
                                    '修改'
                                )
                        ]);
                    }
                }
            ]
        };
    },
    methods: {
        /* 关闭对话框 */
        handleClose() {
            this.isModal = false;
        },
        /* 表格数据请求 */
        getTablesListData() {
            const data = this.search;
            getTablesList(data).then(res => {
                this.list = res.rows;
                this.loading = false;
                this.total = res.data.records;
            });
        },
        /* 关闭审批 */
        setApproval() {
            this.isApproval = false;
            this.getTablesListData();
        },
        /* 表格查询 */
        handleSearch() {
            this.loading = true;
            this.getTablesListData();
        },
        /* 关闭查看 */
        handleCloseViewApproval() {
            this.isViewApproval = false;
        },
        /* 表格分页方法 */
        handleChangePage(type, page) {
            this.loading = true;
            if (type == 'page') {
                this.search.pageindex = page;
                this.getTablesListData();
            } else {
                this.search.pagesize = page;
                this.getTablesListData();
            }
        },
        /* 对话框 */
        handleBtnClick(item, type) {
            this.itemId = item.ID;
            if (type == 'edit') {
                getItemInfo({
                    cfgid: item.GroupID,
                    cfid: item.ID
                }).then(res => {
                    this.approvalInfo = res.data;
                    this.ApprovalLabel = '修改审批';
                    this.isApproval = true;
                    this.groupId = res.data.ComFlow.GroupID;
                });
            } else if (type == 'view') {
                this.isViewApproval = true;
            } else if (type == 'delete') {
                this.$Modal.confirm({
                    title: `你确定要撤销审批吗 ?`,
                    onOk: () => {
                        deleteApproval({
                            fid: item.ID
                        }).then(res => {
                            if (res.state == 'success') {
                                this.$Message.success(res.message);
                                this.allSelectArr = '';
                            } else {
                                this.$Message.error(res.message);
                            }
                            this.getTablesListData();
                        });
                    },
                    onCancel: () => {
                        this.$Message.info('取消成功');
                    }
                });
            }
        },
        /* 表单数据 */
        initFormItem() {
            return {};
        },
        /* 复选框选中 */
        handleAllSelect(list) {
            let arr = [];
            for (let item in list) {
                arr.push(list[item].ID);
                arr.join(',');
            }
            arr = arr.join(',');
            this.allSelectArr = arr;
        }
    },
    mounted() {
        /* 获取菜单的id */
        cyclicRouting(JSON.parse(sessionStorage.getItem('user')).menuList, this.$route, id => {
            /* 按钮权限请求 */
            getModulePermission({
                roleid: JSON.parse(sessionStorage.getItem('user')).roleid,
                moduleid: id
            }).then(res => {
                /* 按钮权限赋值 */
                for (let item in res.data) {
                    if (res.data[item].name == 'view') {
                        this.isView = true;
                    }
                }
                /* 列表请求 */
                this.getTablesListData();
            });
        });
    }
};
</script>

<style>
</style>
